import ProLayout, {
  PageContainer,
  SettingDrawer,
} from '@ant-design/pro-layout';
import { Button, Space, Select, message, Popconfirm } from 'antd';
import ProTable, { EditableProTable } from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import { useEffect, useRef, useState } from 'react';
import {
  PlusOutlined,
  UserAddOutlined,
  SolutionOutlined,
} from '@ant-design/icons';
import styles from './index.less';
const { Option } = Select;
import moment from 'moment';
import { useRequest, Link, history } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProFormDatePicker,
  ProFormDependency,
} from '@ant-design/pro-components';

const UserManagement = () => {
  const getPoliticalStatus = useRequest((data = {}) => {
    return {
      url: 'http://10.1.40.84:9993/getLike',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data: { ...data, field: 'politicalStatus' },
    };
  });

  const getUnit = useRequest((data = {}) => {
    return {
      url: 'http://10.1.40.84:9993/getLike',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data: { ...data, field: 'unit' },
    };
  });

  //多重查找
  const findStuUserByMutilatePart = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/student/findStuUserByMutilatePart',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //添加用户
  const insertStuUser = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/student/insertStuUser',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //删除用户
  const delUserById = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/delUserById',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  const confirm = (e: any) => {
    delUserById.run({ id: e.id }).then(() => {
      findStuUserByMutilatePart.run();
      message.success('删除成功');
    });
  };
  const cancel = (e: any) => {
    message.error('已取消');
  };

  const columnsChanged: any = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      align: 'center',
      className: styles.columns,
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      key: 'realName',
      align: 'center',
      className: styles.columns,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '民族',
      dataIndex: 'nation',
      key: 'nation',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '政治面貌',
      dataIndex: 'politicalStatus',
      key: 'politicalStatus',
      align: 'center',
      className: styles.columns,
      renderFormItem: () => (
        <Select
          showSearch
          filterOption={(input, option) =>
            (option!.children as unknown as string)
              .toLowerCase()
              .includes(input.toLowerCase())
          }
        >
          {getPoliticalStatus?.data?.map((item: any) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      ),
    },
    {
      title: '学院',
      dataIndex: 'unit',
      key: 'unit',
      align: 'center',
      className: styles.columns,
      renderFormItem: () => (
        <Select
          showSearch
          filterOption={(input, option) =>
            (option!.children as unknown as string)
              .toLowerCase()
              .includes(input.toLowerCase())
          }
        >
          {getUnit?.data?.map((item: any) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      ),
    },
    {
      title: '进入实验室时间',
      dataIndex: 'enterTime',
      key: 'enterTime',
      align: 'center',
      hideInSearch: true,
      className: styles.columns,
    },
    {
      title: '离开实验室时间',
      dataIndex: 'exitTime',
      key: 'exitTime',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '生日',
      dataIndex: 'birthday',
      key: 'birthday',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '手机号码',
      dataIndex: 'mobilePhoneNum',
      key: 'mobilePhoneNum',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
    },
    {
      title: '操作',
      align: 'center',
      className: styles.columns,
      hideInSearch: true,
      fixed: 'right',
      render: (text: any, record: any) => (
        <Space>
          <Link to={'/SystemManage/StudentManagement/StudentInfo/' + record.id}>
            查看
          </Link>
          <Popconfirm
            key={'2'}
            title="确定删除吗？"
            onConfirm={() => confirm(record)}
            onCancel={() => cancel}
            okText="确定"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable
        rowKey={'id'}
        dataSource={findStuUserByMutilatePart?.data}
        request={async (param) => {
          var tableData: any = [];
          await findStuUserByMutilatePart.run(param).then((data) => {
            tableData = data;
          });
          return { data: tableData || [], seccess: true };
        }}
        columns={columnsChanged}
        headerTitle={
          <>
            <SolutionOutlined />
            <strong>{' 用户列表'}</strong>
          </>
        }
        toolBarRender={() => [
          <Button
            icon={<UserAddOutlined />}
            type="primary"
            onClick={() => {
              history.push('/SystemManage/StudentManagement/StudentInfo/new');
            }}
          >
            新建用户
          </Button>,
        ]}
        pagination={{ pageSize: 10 }}
        search={{
          collapseRender: false,
          span: 8,
          collapsed: false,
        }}
      />
    </PageContainer>
  );
};

export default UserManagement;
